<template>
  <view class="step-2">
    <!--每日练习 步骤2-->
    <view class="line" style="height: 10px"></view>
    <!--竞赛选择关卡-->
    <SelectLevel v-if="practiceType == '3'" :levelData="levelData" @updateLevelNumber="levelData.passLevel = $event"
      @updateCondition="levelData.passRate = $event" @updateLevelName="levelData.levelName = $event" :levelNameList="levelNameList"></SelectLevel>
    <view class="line" style="height: 10px" v-if="practiceType == '3'"></view>
    <!--选择题库-->
    <view class="select-question modal">
      <view class="head flex flex-row between">
        <view class="num">已选择<label>{{ questionList.length }}</label>个题库</view>
        <view style="width: 72px;text-align: center">权重</view>
      </view>
      <view class="question-list">
        <view class="item flex flex-row between" v-for="(item, index) in questionList" :key="index">
          <view class="name f_1">{{ item.name }}</view>
          <view class="scale fs_0"><input v-model="item.scale" /></view>
        </view>
      </view>
    </view>
    <view class="line" style="height: 3px"></view>
    <view class="add-question modal flex-row  center" @click="optionQuestionPopup">
      <u-icon name="plus-circle" color="#37B874" size="20"></u-icon>
      <view style="margin-left: 12px">选择题库</view>
    </view>
    <view class="line" style="height: 10px"></view>
    <Navbar :tab-list="navList" class="step-navbar" :selectVal="navbarVal" @updateVal="navbarClick" />
    <!--每日一练 有奖答题-->
    <!-- <SubjectRule @updateTopicList="topicList = $event" v-if="navbarVal == 11 && (practiceType == '1' || practiceType == '4')"
      :subType="navbarVal" ref="SubjectRule"></SubjectRule> -->
    <!-- 随机抽题 章节抽题 -->
    <SubjectRule @updateTopicList="topicList = $event" v-if="practiceType == '1' || practiceType == '4'"
      :subType="navbarVal" :questionList="questionList" ref="SubjectRule"></SubjectRule>
    <!--每天练习模式end-->

    <!--在线练习模式-->
    <!-- 平均抽题 平均抽题 -->
    <!-- <OnLineSubjectRule @updateTopicList="onLineSubjectRuleChange"
      v-if="(navbarVal == 3 || navbarVal == 1) && practiceType == '2'" :subType="navbarVal" ref="SubjectRule">
    </OnLineSubjectRule> -->
    <!--题型抽题-->
    <OnLineSubjectRule @updateTopicList="onLineSubjectRuleChange" v-if="practiceType == '2'" :subType="navbarVal"
      ref="SubjectRule"></OnLineSubjectRule>
    <!--在线练习模式end-->

    <!--竞赛抽题-->
    <!-- <RivalrySubjectRule @updateTopicList="topicList = $event" v-if="navbarVal == 11 && practiceType == '3'"
      :subType="navbarVal" :levelData="levelData" :questionList="questionList" ref="SubjectRule"></RivalrySubjectRule> -->
    <!--章节抽题-->
    <RivalrySubjectRule @updateTopicList="topicList = $event" v-if="practiceType == '3'" :subType="navbarVal"
      :levelData="levelData" :questionList="questionList" ref="SubjectRule"></RivalrySubjectRule>
    <!--竞赛抽题end-->

    <view class="btn-item">
      <view class="btn" @click="submit">{{ uuid ? '确定' : '下一步' }}</view>
    </view>
    <!--选择题库弹窗-->
    <SelectQuestionPopup ref="SelectQuestionPopup" @questionConfirm="questionConfirm"></SelectQuestionPopup>
  </view>
</template>
<script>
import SelectQuestionPopup from "./SelectQuestionPopup.vue";
import Navbar from "@/improve/components/Navbar.vue";
import SubjectRule from "./SubjectRule.vue";
import OnLineSubjectRule from "./OnLineSubjectRule.vue";
import RivalrySubjectRule from "./RivalrySubjectRule.vue";
import SelectLevel from "./SelectLevel.vue";
import { examExtractQuestionTypes, exerciseExtractQuestionTypes } from "@/improve/components/enum";

export default {
  name: "Step2",
  components: { SelectLevel, RivalrySubjectRule, OnLineSubjectRule, SubjectRule, Navbar, SelectQuestionPopup },
  inject: ['prop_practice', "pro_practiceType"],
  data() {
    return {
      questionList: [],
      navbarVal: 1,
      topicList: [],
      uuid: null,
      //竞赛 关卡：题库
      levelData: {
        levelName: "",
        passLevel: null,
        passRate: null,
      },
      onLineSubjectData: {
        type: null,
        amountStr: null
      },
      levelNameList: []
    }
  },
  computed: {
    detail() {
      return this.prop_practice()
    },
    practiceType() {
      return this.pro_practiceType()
    },
    navList() {
      return this.practiceType == "2" ? exerciseExtractQuestionTypes : examExtractQuestionTypes
    }
  },
  methods: {
    // 在线练测-更新抽题规则
    onLineSubjectRuleChange(value) {
      if (this.navbarVal !== 2) {
        this.onLineSubjectData = { ...value }
      } else {
        this.topicList = [...value]
      }
    },
    optionQuestionPopup() {
      if (this.practiceType == "3") {
        //竞赛练习时 判断
        if (!this.levelData.levelName) {
          this.showToast('请选择关卡')
          return;
        }
        if (!this.levelData.passLevel) {
          this.showToast('请填写闯关机会')
          return;
        }
        if (!this.levelData.passRate) {
          this.showToast('请填写过关条件')
          return;
        }
      }
      const selectIds = this.questionList.map(item => item.subjectUuid)
      this.$refs.SelectQuestionPopup.open(selectIds)
    },
    navbarClick(val) {
      if (val == this.navbarVal) return
      const msg = this.navList.find((item) => item.value == val).text
      uni.showModal({
        title: '提示',
        content: '确定要切换到' + msg,
        success: (res) => {
          if (res.confirm) {
            this.navbarVal = val // 切换章节时，修改章节对应规则
          }
        }
      });
    },
    submit() {
      if (!this.questionList.length) {
        this.showToast('请选择题库')
        return;
      }
      if (this.navbarVal === 1 || this.navbarVal === 3) {
        if (!this.onLineSubjectData.type || !this.onLineSubjectData.amountStr) {
          this.showToast('请配置抽题方式或抽题比例');
          return;
        }
      } else if (!this.topicList.length) {
        this.showToast('请配置试题内容')
        return;
      }
      const item = this.questionList.find((item) => !item.scale)
      if (item) {
        this.showToast('请填写' + item.name + "权重")
        return;
      }
      const scaleSum = this.questionList.reduce((sum, currentSubject) => {
        return sum + parseInt(currentSubject.scale);
      }, 0); // 初始值为0
      if (scaleSum !== 100) {
        this.showToast("题库权重总和必须为100")
        return;
      }
      //规则数组
      const exQuestionList = JSON.parse(JSON.stringify(this.topicList))
      //题库数组
      const subjectList = [...this.questionList]
      this.$emit("updatePostParams", { ...this.detail, ...this.onLineSubjectData, subjectList, [this.practiceType == '3' ? 'levelList' : 'exQuestionList']: exQuestionList, pattern: this.navbarVal, uuid: this.uuid }, 3)
    },
    showToast(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
        duration: 2000
      });
    },
    //选中题库
    questionConfirm(vals) {
      this.questionList = vals.map((item) => ({
        name: item.name,
        subjectUuid: item.subjectUuid,
        subjectId: item.id,
        scale: item.scale ? item.scale : null,
      }))
    },
    //修改进入 初始数据
    initJsonData() {
      if (this.detail) {
        console.log(this.detail, 'this.detail')
        //进入修改界面
        const data = JSON.parse(JSON.stringify(this.detail));
        this.questionList = data.subjectList.map((item) => ({
          name: item.name,
          scale: item.scale,
          subjectUuid: item.subjectUuid,
          subjectId: item.subjectId,
          id: item.id
        }))
        this.topicList = this.practiceType == '3' ? data.levelList : data.exQuestionList
        this.uuid = data.uuid
        this.navbarVal = data.pattern
        if (data.levelList && data.levelList.length != 0) {
          this.levelData = {
            levelName: data.levelList[0].levelName,
            passLevel: data.levelList[0].passLevel,
            passRate: data.levelList[0].passRate,
          }
          this.levelNameList = data.levelList.map(i => i.levelName)
        }
      }
    }
  },
  created() {
    this.navbarVal = this.navList[0].value
    this.initJsonData()
  },
}
</script>
<style scoped lang="scss">
.step-2 {
  .modal {
    padding: 24rpx;
  }

  .select-question {
    border-top-right-radius: 24rpx;
    border-top-left-radius: 24rpx;
    background-color: #FFFFFF;

    .head {
      color: #333333;
      font-size: 32rpx;
      padding: 24rpx 0;

      label {
        color: #37B874;
        margin: 0 6rpx;
      }
    }

    .item {
      &+.item {
        margin-top: 8px;
      }

      .name {
        background-color: #F9F9F9;
        border-radius: 10px;
        color: #000000;
        padding: 0 16rpx;
        font-size: 32rpx;
        height: 42px;
        line-height: 42px;
      }

      .scale {
        width: 72px;
        height: 42px;
        margin-left: 10px;

        input {
          width: 100%;
          height: 100%;
          background-color: #F9F9F9;
          border-radius: 10px;
          font-size: 16px;
          text-align: center;
        }
      }
    }
  }

  .add-question {
    font-size: 32rpx;
    border-bottom-left-radius: 24rpx;
    border-bottom-right-radius: 24rpx;
    padding: 29rpx !important;
    background-color: #FFFFFF;
  }

  .add-rule {
    background-color: #FFFFFF;
    margin: 3px 0 10px 0;
    padding: 29rpx;
  }

  .step-navbar {
    background: white;
    display: flex;
    padding: 50rpx 32rpx 20rpx 32rpx;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
  }


  .item-title {
    font-weight: bold;
    color: #333333;
    font-size: 32rpx;
    margin: 32rpx 0;
  }
}
</style>